<template>
  <div class="right-box">
    <div class="search-box">
      <div>
        <span>搜索：</span>
        <el-input v-model="inputValue" placeholder="根据登录账号和姓名搜索" size="small" />
        <div class="button-box">
          <el-button @click="searchData" color="#fc702b" style="color:#fff;">查询</el-button>
          <el-button @click="resetData" color="#f0f0f0" style="color: #000000">重置</el-button>
        </div>
      </div>
      <div>
        <el-button @click="toRolePage" class="button_funtion">
          <svg-icon icon-class="xtsz_btn" style="margin-right: 5px" />角色及权限设置
        </el-button>
      </div>
    </div>
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%" :header-cell-style="headCellStyle" max-height="600" ref="tableRef">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column v-for="item in tableHead" :property="item.propName" :label="item.title" align="center"
          show-overflow-tooltip>
          <template #default="scope">
            <span>
              <template v-if="item.propName === 'roleNames'">
                {{ handleNames(scope.row[item.propName]) }}
              </template>
              <template v-else>
                {{ scope.row[item.propName] ?? "暂无" }}
              </template>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template #default="scope">
            <el-button size="small" @click="handleRole(scope.row)" class="option-button button_view">
              分配角色
            </el-button>
          </template>
        </el-table-column>
        <template #empty>
          <div style="line-height: 60px; color: #909399; text-align: center">
            暂无数据
          </div>
        </template>
      </el-table>
    </div>
    <!-- <div class="bottom-desc">
			<span>
				1到{{ pageSetting.total }}条，共计{{ pageSetting.total }}条。
			</span>
		</div> -->
    <el-pagination layout="total,sizes,prev, pager, next,jumper" :page-size="pageSetting.pageSize"
      :page-sizes="pageSetting.pageSizes" :total="pageSetting.total" :current-page="currentPage"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <roleDialog ref="roleDialogRef" @submit="submitSuccess"></roleDialog>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import {
  ElInput,
  ElButton,
  ElTable,
  ElTableColumn,
  ElPagination,
} from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import roleDialog from "./roleDialog.vue";
// import systemApi from "../../systemSetting.js";
import systemApi from "@/views/systemSetting/systemSetting"


const props = defineProps({
  selectIds: {
    type: Array,
  },
});

// ---输入框绑定值---
let inputValue = ref("");

// ---搜索---
let searchData = () => {
  getTableData();
};

// ---重置---
let resetData = () => {
  inputValue.value = "";
  getTableData();
};

// ---路由跳转---
const store = useStore();
const router = useRouter();
let toRolePage = () => {
  router.push("/systemSetting/role");
  // console.log( router.currentRoute.value)
  // store.commit("SET_ACTIVE_PATH", "/systemSetting/role");
};

// 表头样式
let headCellStyle = {
  padding: "10px 0px",
};

// ---表格数据---
let tableRef = ref(null);
let tableHead = [
  {
    propName: "id",
    title: "序号",
  },
  {
    propName: "account",
    title: "登录账号",
  },
  {
    propName: "userName",
    title: "姓名",
  },
  {
    propName: "userPost",
    title: "OA当前主副岗",
  },
  {
    propName: "roleNames",
    title: "当前角色",
  },
];
let tableData = ref([]);

// ---处理roleNames数组---
let handleNames = (arr) => {
  // console.log(arr);
  let str = "";
  if (arr.length) {
    for (let i = 0; i < arr.length; i++) {
      let name = arr[i];
      if (name) {
        if (i < arr.length - 1 && arr[i + 1]) {
          str += name + "/";
        } else {
          str += name;
        }
      }
    }
  }
  return str === "" ? "暂无" : str;
};

// 弹窗元素
let roleDialogRef = ref(null);

// ---操作-分配角色---
let handleRole = async (row) => {
  let selectArr = tableRef.value.getSelectionRows();
  selectArr.push(row);
  let map = new Map();
  for (const obj of selectArr) {
    map.set(obj.id, obj);
  }
  let userIds = [...map.values()].map((item) => {
    return item.userId;
  });
  let res = await systemApi.auth.getRoleAndUserRole(userIds);
  roleDialogRef.value.tableData = res;
  roleDialogRef.value.userIds = userIds;
  roleDialogRef.value.dialogVisible = true;
};

let submitSuccess = () => {
  getTableData();
};

// ---分页参数---
let pageSetting = ref({
  pageSize: 10,
  pageSizes: [10, 20, 30, 40, 50],
  total: 0,
  currentPage: 1,
});

// ---修改当前页---
let handleCurrentChange = (val) => {
  pageSetting.value.currentPage = val;
  getTableData();
};
// ---修改每页显示个数---
let handleSizeChange = (val) => {
  pageSetting.value.pageSize = val;
  getTableData();
};

let getTableData = async () => {
  let res = await systemApi.auth.getUserRole({
    pageNum: pageSetting.value.currentPage,
    pageSize: pageSetting.value.pageSize,
    param: {
      departmentId: props.selectIds[0],
      userName: inputValue.value,
    },
  });
  // console.log(res, "--- tableData ---");
  if (res) {
    let { content, totalSize } = res;
    pageSetting.value.total = totalSize;
    tableData.value = content.map((item, index) => {
      return {
        id: index + 1,
        ...item,
      };
    });
  }
};

watch(
  () => props.selectIds,
  (arr) => {
    // console.log(arr, "---------rightTable--------");
    if (arr.length) {
      getTableData();
    } else {
      tableData.value = [];
    }
  }
  // {
  // 	immediate: true,
  // }
);
</script>
<style lang="scss" scoped>
.right-box {
  padding: 0 20px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .search-box {
    display: flex;
    justify-content: center;
    align-items: center;

    >div {
      &:nth-child(1) {
        flex: 5;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-right: 15px;
        border-right: 1px solid #e3e7f1;

        >span {
          white-space: nowrap;
          font-size: 14px;
          font-family: SourceHanSansCN-Normal, SourceHanSansCN;
          font-weight: 400;
          color: #1a1a1a;
          line-height: 21px;
        }

        :deep(.el-input) {
          .el-input__wrapper {
            background: #f7f7f7;
          }
        }

        .button-box {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 10px;
          // :deep(.el-button) {
          // 	padding: 18px 25px;
          // 	border: none;
          // 	span {
          // 		font-size: 14px;
          // 		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
          // 	}
          // 	&:nth-child(1) {
          // 		background: #fc7018;
          // 		span {
          // 			font-weight: 500;
          // 			color: #ffffff;
          // 		}
          // 	}
          // 	&:nth-child(2) {
          // 		background: #f0f0f0;
          // 		span {
          // 			color: #1a1a1a;
          // 		}
          // 	}
          // }
        }
      }

      &:nth-child(2) {
        flex: 6;
        text-align: right;
        // :deep(.el-button) {
        // 	background: #d4ae85;
        // 	padding: 18px 20px;
        // 	border: none;
        // 	span {
        // 		font-size: 14px;
        // 		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        // 		font-weight: 500;
        // 		color: #ffffff;
        // 	}
        // }
      }
    }
  }

  .table-box {
    margin: 20px 0;
  }

  .bottom-desc {
    font-size: 10px;
    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    font-weight: 400;
    color: #999999;
    line-height: 15px;
    margin-top: 10px;
  }
}

// :deep(.option-button) {
//   background: #fc7018;

//   span {
//     color: #ffffff;
//     font-family: MicrosoftYaHeiSemibold;
//   }
// }
</style>
